<template>
  <a-card :bordered="false">
    <div>
      <a-row>
        <a-col :xl="6" :lg="1" :md="8" :sm="24">
          <p>商品报损报溢查询</p>
        </a-col>
      </a-row>
      <a-row>
        <a-col :xl="6" :lg="1" :md="8" :sm="24">
          <p>查询设置</p>
        </a-col>
      </a-row>

    </div>

    <div>
      <a-row>
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
            单号：{{ bsNumber }}
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col :xl="7" :lg="7" :md="8" :sm="24">
          <p>开单日期:</p>
        </a-col>
        <a-col :xl="17" :lg="7" :md="8" :sm="24">
          <p>备注:</p>
        </a-col>
      </a-row>
      <a-row>
        <a-col :xl="7" :lg="7" :md="8" :sm="24">
          <a-date-picker :default-value="moment(currentDate, dateFormat)" disabled />
        </a-col>
        <a-col :xl="15" :lg="7" :md="8" :sm="24">
          <a-input class="query-group-cust" v-model="queryParam.billingDate"></a-input>
        </a-col>
        <a-col :xl="2" :lg="7" :md="8" :sm="24">
          <a-button @click="handleAdd" type="primary" icon="plus">保存</a-button>
        </a-col>
      </a-row>
      <br/>
    </div>
    <div>
      <!-- 操作按钮区域 -->
      <div class="ant-alert ant-alert-info">
          <a-button @click="handleAdd" type="primary">添加</a-button>
          <a-button @click="handleEdit" type="primary">修改</a-button>
          <a-button @click="handleDelete" type="delete">删除</a-button>
      </div>
      <!--table区域-->
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="this.handleTableChange2">
      </a-table>
    </div>
    <div>
      <a-modal
        title="Title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        width="1200px">
        <div>
          <a-row>
            <a-col :span="5">
              <a-tree :tree-data="treeData" show-icon default-expand-all :default-selected-keys="['0-0-0']">
                <a-icon slot="switcherIcon" type="down" />
                <a-icon slot="smile" type="smile-o" />
                <a-icon slot="meh" type="smile-o" />
                <template slot="custom" slot-scope="{ selected }">
                  <a-icon :type="selected ? 'frown' : 'frown-o'" />
                </template>
              </a-tree>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="19">
              <a-table
                ref="table"
                size="middle"
                :scroll="{x:true}"
                bordered
                rowKey="id"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                :loading="loading"
                class="j-table-force-nowrap"
                @change="handleTableChange">
              </a-table>
            </a-col>
          </a-row>
        </div>
      </a-modal>
    </div>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  // import JxcGoodsModal from './modules/JxcGoodsModal'
  import ARow from "ant-design-vue/es/grid/Row";
  import ACol from "ant-design-vue/es/grid/Col";
  import moment from 'moment';
  //弹窗树结构数据
  const treeData = [
    {
      title: 'parent 1',
      key: '0-0',
      slots: {
        icon: 'smile',
      },
      children: [
        { title: 'leaf', key: '0-0-0', slots: { icon: 'meh' } },
        { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' } },
      ],
    },
  ];
  export default {
    name: 'JxcGoodsList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      ACol,
      ARow,
      // JxcGoodsModal
    },
    data () {
      this.dateFormat = 'YYYY-MM-DD';
      return {
        description: 'jxc_goods管理页面',
        columns: [
          {
            title: '',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'商品编码',
            align:"center",
            dataIndex: 'goodsCode'
          },
          {
            title:'商品名称',
            align:"center",
            dataIndex: 'goodsName'
          },
          {
            title:'商品型号',
            align:"center",
            dataIndex: 'goodsModel'
          },
          {
            title:'商品单位',
            align:"center",
            dataIndex: 'goodsUnit'
          },
          {
            title:'单价',
            align:"center",
            dataIndex: 'price'
          },
          {
            title:'数量',
            align:"center",
            dataIndex: 'goodsNum'
          },
          {
            title:'总金额',
            align:"center",
            dataIndex: 'total'
          },
        ],
        url: {
          list: "/homepage/jxcGoods/list",
          delete: "/homepage/jxcGoods/delete",
          deleteBatch: "/homepage/jxcGoods/deleteBatch",
          exportXlsUrl: "/homepage/jxcGoods/exportXls",
          importExcelUrl: "homepage/jxcGoods/importExcel",

        },
        dictOptions:{},
        bsNumber:123,//报损单号
        billingDate:undefined,//开单日期
        currentDate:"",//当前日期
        dataSource:[],//新增报损数据暂存
        /* 分页参数 */
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['5', '10', '15'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* 排序参数 */
        isorter:{
          column: 'goodsCode',
          order: 'desc',
        },
        /*表格数据*/
        visible: false,
        confirmLoading: false,
        treeData,//树结构数据

      };
    },
    created() {
      // 调用获取当前日期的方法加四位随机数  赋值表单中的项目编号
        // 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就行了
        let currentDate = this.getProjectNum();
        this.bsNumber = "BS"+currentDate + Math.floor(Math.random() * 100000);
        this.currentDate = currentDate;
    },
    computed: {

    },
    methods: {
      //树结构
      onSelect(selectedKeys, info) {
        console.log('selected', selectedKeys, info);
      },
      //树结构
      onCheck(checkedKeys, info) {
        console.log('onCheck', checkedKeys, info);
      },
      //弹框确认
      handleOk(){
        this.visible = false;
      alert(1)},
      //弹框取消
      handleCancel(){
        this.visible = false;
      alert(2)},
      //新增报损
      handleAdd(){this.visible = true;},
      //修改报损
      handleEdit(){alert(4)},
      //删除报损
      handleDelete(){alert(5)},


      handleTableChange2(pagination,sorter) {
        //分页、排序、筛选变化时触发
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
      },

      moment,//新增订单时间默认

      // 获取当前日期的方法
      getProjectNum () {
        var date = new Date();
          return date.getFullYear()+""+(date.getMonth()+1)+date.getDate();//表示当前日期
      },
      initDictConfig(){
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>